<template>
  <div>
    <!-- 个人 -->
    <div class="individual_box">
      <!-- 地区 -->
      <div>
        <span>选择城市:</span>
        <div>
          <picker mode="region" @change="cityPickerChange" :value="region" :custom-item="customItem">
            <div class="picker">
              <view class="" v-if="regionCode.length > 0">
                {{region[0]}}，{{region[1]}}，{{region[2]}}
              </view>
              <view class="" v-else>
                {{cityname}}
              </view>
              <view>></view>
            </div>
          </picker>
        </div>
      </div>
      <!-- 姓名 -->
      <div>
        <span>姓 名:</span>
        <div>
          <input @input="onKeyName" type="text" placeholder="请输入姓名">
        </div>
      </div>
      <!-- 电话 -->
      <div>
        <span>电 话:</span>
        <div>
          <input @input="onKeyPhone" type="number" placeholder="请输入联系电话">
        </div>
      </div>
      <!-- 地址 -->
      <div>
        <span>地 址:</span>
        <div>
          <input @input="onKeyAddress" type="text" placeholder="请输入地址">
        </div>
      </div>
      <!-- 身份证 -->
      <div>
        <span>身份证:</span>
        <div>
          <input @input="onKeyIdcard" type="idcard" placeholder="请输入身份证">
        </div>
      </div>
      <!-- 工种类型 -->
      <div>
        <span>工种类型:</span>
        <div>
          <picker @change="bindPickerChange" :value="bindIndex" :range="array" range-key="label">
            <div class="picker">
              <view class="">
                {{bindIndex?array[bindIndex].label:nullname}}
              </view>
              <view>></view>
            </div>
          </picker>
        </div>
      </div>
    </div>

    <!-- 个人照片 -->
    <div class="individual_identity">
      <p>手持身份证拍照</p>
      <div @tap="chooseImg1()">
        <img v-if="imageFile1 == ''" src="/static/images/zpz@2x.png" alt="">
        <img v-else :src="imageFile1" alt="" >
      </div>
    </div>
    <!-- 身份证照片 -->
    <div class="individual_identity">
      <p>证件照</p>
      <div>
        <div class="null" @tap="chooseImg2()">
          <img v-if="imageFile2 == ''" src="/static/images/sfzzm@2x.png" alt="">
          <img v-else :src="imageFile2" alt="" >
          <span>正面照</span>
        </div>
        <div class="null" @tap="chooseImg3()">
          <img v-if="imageFile3 == ''" src="/static/images/sfzfm@2x.png" alt="">
          <img v-else :src="imageFile3" alt="" >
          <span>反面照</span>
        </div>
      </div>
    </div>
    <!-- 协议 -->
    <div class="individual_identity">
      <p>协议上传<span>（协议模版下载）</span></p>
      <div @tap="chooseImg4()">
        <div v-if="imageFile4 == ''">
          <p class="tup">+</p>
        </div>
        <div v-else>
          <img class="tup" :src="imageFile4" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="individual_bottom">
      <p>提交注册即表示您已阅读并同意<span>《师傅入住协议》</span></p>
      <div @click="onRegister()">同意协议并注册</div>
      <div><span>联系平台:</span><span>400-8888-8888</span></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {

  },
  components: {
  },
  data() {
    return {
      inputName: '',
      inputPhone: '',
      inputAddress: '',
      inputIdcard: '',
      // 下拉框数据
      region: ['湖北省', '武汉市', '洪山区'],
      regionCode: [],
      customItem: '全部',
      array: [],
      arrayText: '',
      cityIndex: 0,
      bindIndex: 0,
      nullname: '请选择工种类型',
      cityname: '请选择城市',
      imageFile1: '',
      imageFile2: '',
      imageFile3: '',
      imageFile4: ''
    }
  },
  created() {
    this.request({
      url: this.baseUrl + '/shop/water.water/getWorkTypeData',
      data:{
      },
      method: 'GET',
    })
    .then(result=>{
      if(result.status == 200){
        this.array = result.data
        console.log(this.array)
        return true
      } else {
        return false
      }
    })
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    onKeyName: function(event) {
      this.inputName = event.target.value
    },
    onKeyPhone: function(event) {
      this.inputPhone = event.target.value
    },
    onKeyAddress: function(event) {
      this.inputAddress = event.target.value
    },
    onKeyIdcard: function(event) {
      this.inputIdcard = event.target.value
    },
    cityPickerChange: function(e) {
      // console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.region = e.mp.detail.value
      this.regionCode = e.mp.detail.code
      // console.log(this.regionCode)
    },
    bindPickerChange: function(e) {
      // console.log('picker发送选择改变，携带值为', e.mp.detail.value)
      this.bindIndex = e.mp.detail.value
      this.arrayText = this.array[this.bindIndex].value
      // console.log(this.bindIndex)
      // console.log(this.arrayText)
    },
    /** 手持身份证照 */
    chooseImg1: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit1()
        }
      })
    },
    formSubmit1: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile1 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    /** 身份证照正面 */
    chooseImg2: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit2()
        }
      })
    },
    formSubmit2: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile2 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },

    /** 身份证照反面 */
    chooseImg3: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit3()
        }
      })
    },
    formSubmit3: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile3 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    /** 协议上传 */
    chooseImg4: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit4()
        }
      })
    },
    formSubmit4: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile4 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },

    onRegister() {
      var that = this
      if(!that.regionCode.length > 0){
        wx.showToast({
          title: '请选择城市',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      if(!that.inputName.trim()){
        wx.showToast({
          title: '请输入用户姓名',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      if(!(/^1[3456789]\d{9}$/.test(that.inputPhone))){
        wx.showToast({
          title: '请输入正确手机号',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      if(!that.inputAddress.trim()){
        wx.showToast({
          title: '请输入详细地址',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      if(!/^\d{17}(\d|x)$/i.test(that.inputIdcard)){
        wx.showToast({
          title: '请输入正确身份证号码',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      if(!that.arrayText){
        wx.showToast({
          title: '请选择工种类型',
          icon: 'none',
          duration: 2000
        });
        return false
      }
      that.request({
        url: that.baseUrl + '/api/wechatapp/userinfo',
        data:{
          openid: wx.getStorageSync('openid'),
          type_user: 1,                     // 类型 1个人 2公司
          codes: that.regionCode,      // 选择省市区
          user_name: that.inputName,        // 姓名
          mobile: that.inputPhone,           // 手机号
          address: that.inputAddress,       // 详细地址
          identity_num: that.inputIdcard,   // 身份证号
          work_type_id: that.arrayText,     // 工种类型
          hold_img_card: that.imageFile1,
          identity_img_up: that.imageFile2,
          identity_img_down: that.imageFile3,
          contract: that.imageFile4,
        },
        method: 'POST'
      })
      .then(result=>{
        console.log(result)
        if(result.status == 200){
          wx.showToast({
            icon: 'success',
            title: '注册成功',
            duration: 1000,
            success:function(){
              setTimeout(function() {
                that.request({
                  url: that.baseUrl + '/api/wechatapp/login',
                  data:{
                    login_type: 2,
                    openid: wx.getStorageSync('openid')
                  },
                  method: 'POST',
                })
                .then(result=>{
                  console.log(result)
                  if(result.status == 200){
                    wx.reLaunch({
                      //跳转到小程序首页
                      url: "/pages/index/main"
                    });
                  } else {
                    return false
                  }
                })
              }, 1000)
            }
          })
        }else{
          wx.showToast({
            title: result.msg,
            icon: 'none'
          })
        }
      })

    }
  },
};
</script>

<style scoped >
/* 个人css */
.individual_box {
  margin: 20rpx 0;
  /* padding: 0 20rpx; */
  background: #ffffff;
}
.individual_box > div {
  display: flex;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f6fa;
}
.individual_box > div > div:nth-child(2) {
  flex: 2;
  color: #878b99;
}
.individual_box > div > span {
  flex: 1;
}
.picker {
  display: flex;
  justify-content: space-between;
}
.individual_identity p {
  margin: 30rpx;
  color: #888888;
}
.individual_identity > div:nth-child(2) {
  background: #ffffff;
  display: flex;
}
.individual_identity img {
  width: 276rpx;
  height: 178rpx;
  margin: 30rpx;
}
.null {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.null span {
  padding-bottom: 20rpx;
}
.tup {
  width: 144rpx;
  height: 144rpx;
  line-height: 128rpx;
  text-align: center;
  border: 2rpx solid #cccccc;
  font-size: 121rpx;
  color: #cccccc;
}
.individual_identity > p:nth-child(1) span {
  color: #1677ff;
}
.individual_bottom {
  text-align: center;
  /* margin-bottom: 200rpx; */
}
.individual_bottom p {
  margin: 100rpx 0 10rpx 0;
  color: #878b99;
}
.individual_bottom p > span {
  color: #1677ff;
}
.individual_bottom > div:nth-child(2) {
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;
  background: #1677ff;
  color: #ffffff;
  border-radius: 10rpx;
}
.individual_bottom > div:nth-child(3) > span:nth-child(2) {
  color: #1677ff;
}
.individual_bottom > div:nth-child(3) {
  margin: 20rpx;
}
</style>
